<template>
 <div class="header">
     <div class="header-left"><span class="iconfont">&#xe77f;</span></div>
     <div class="header-input"><input type="text" placeholder="请输入..."> <span class="iconfont">&#xe7e1;</span></div>
     <router-link to='/city'>
     <div class="header-right">{{this.city}}<span class="iconfont">&#xe780;</span></div>         
     </router-link>
 </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
export default {
    computed :{
        ...mapState(['city']),
        ...mapGetters(['doubleCity'])
    },
    props:{
        
    },  
   data () {

    
     return {

     }
   },
   components: {

   },
   methods:{

   }
 }
</script>

<style scoped>
    .header{
        display: flex;
        width: 100%;
    }
    .header-left{
        float: left;
    }
    .header-input{
            flex: 1;
            text-align: center;
    }
    .header-right{
        color:black;
        float: right;
    }
 
</style>

  
    

